<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .tool-bar {
        position: fixed;
        top: 30%;
        right: 0;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 35px;
      }

      .item {
        position: relative;
        width: 35px;
        height: 35px;
        margin-bottom: 1px;

        background-color: #7a6e6e;
        border-radius: 3px 0 0 3px;
      }

      .icon {
        display: inline-block;
        width: 100%;
        height: 100%;
        cursor: pointer;
        background-image: url(./img/toolbars.png);
      }

      /* 在 JavaScript 中，设置背景图片位置 */
      /* .icon01 {
      background-position: -48px 0;
    }
    .icon02 {
      background-position: -48px -50px;
    }
    .icon03 {
      background-position: -48px -100px;
    }
    .icon04 {
      background-position: -48px -150px;
    } */

      .name {
        position: absolute;
        z-index: -1;
        right: 35px;
        top: 0;

        width: 0;
        height: 35px;
        line-height: 35px;

        color: #fff;
        text-align: center;
        font-size: 12px;
        background-color: #7a6e6e;
        cursor: pointer;

        border-radius: 3px 0 0 3px;
        transition: width 0.2s ease;
      }

      .item:hover,
      .item:hover .name {
        background-color: #cd1926;
      }
    </style>
  </head>
  <body>
    <div class="tool-bar">
      <div class="item">
        <i class="icon icon01"></i>
        <div class="name">购物车</div>
      </div>
      <div class="item">
        <i class="icon icon02"></i>
        <div class="name">收藏</div>
      </div>
      <div class="item">
        <i class="icon icon03"></i>
        <div class="name">限时活动</div>
      </div>
      <div class="item">
        <i class="icon icon04"></i>
        <div class="name">大礼包</div>
      </div>
    </div>

    <script>
      // 1.动态给 icon 设置 backgroundPosition
      var iconEls = document.querySelectorAll('.icon')

      for (var i = 0; i < iconEls.length; i++) {
        var iconEl = iconEls[i]
        iconEl.style.backgroundPosition = `-48px -${50 * i}px`
      }

      // 2.实现鼠标进入动画
      // 方案一: mouseenter（不能使用事件委托）
      var itemEls = document.querySelectorAll('.item')

      for (var itemEl of itemEls) {
        itemEl.onmouseenter = function () {
          var nameEl = this.children[1]
          nameEl.style.width = '62px'
        }

        itemEl.onmouseleave = function () {
          var nameEl = this.children[1]
          nameEl.style.width = '0'
        }
      }

      // 方案二: mouseover(使用事件委托)
      /* var toolbarEl = document.querySelector('.tool-bar')

      toolbarEl.onmouseover = function (event) {
        handleMouseEvent(event, 62)
      }
      toolbarEl.onmouseout = function (event) {
        handleMouseEvent(event, 0)
      }

      function handleMouseEvent(event, width) {
        if (event.target !== toolbarEl) {
          // 1.获取唯一的 item
          var itemEl = event.target.classList.contains('item')
            ? event.target
            : event.target.parentElement

          // 2.根据item获取nameElement
          var nameEl = itemEl.children[1]

          // 3.设置宽度
          nameEl.style.width = `${width}px`
        }
      } */
    </script>
  </body>
</html>
